<template>
  <div class="producs">
    <img src="@/assets/images/tuijian.png" alt />
    <ul>
      <li v-for="(item,index) in products" :key="index" @click="product(item)">
        <img :src="item.img" alt />
        <div class="title">{{item.name}}</div>
        <div class="box">
          <span class="prive">{{item.price}}</span>
          <span class="button" @click.stop="recommend">找相似</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      productList: [
        {
          id: 1,
          img: require("@/assets/images/product_1.jpg"),
          name: "桌子",
          price: "$12.00",
          month: 2
          // button:require('')
        },
        {
          id: 2,
          img: require("@/assets/images/product_2.jpg"),
          name: "三级包",
          price: "$13.00",
          month: 2
          // button:require('')
        },
        {
          id: 3,
          img: require("@/assets/images/product_3.jpg"),
          name: "红酒",
          price: "$13",
          month: 2
          // button:require('')
        },
        {
          id: 4,
          img: require("@/assets/images/product_4.jpg"),
          name: "背枕",
          price: "$13",
          month: 2
          // button:require('')
        },
        {
          id: 5,
          img: require("@/assets/images/product_5.jpg"),
          name: "拉杆箱",
          price: "$13",
          month: 2
          // button:require('')
        },
        {
          id: 6,
          img: require("@/assets/images/product_6.jpg"),
          name: "密码锁",
          price: "$13",
          month: 2
          // button:require('')
        },
        {
          id: 7,
          img: require("@/assets/images/product_7.jpg"),
          name: "手提箱",
          price: "$13",
          month: 2
          // button:require('')
        },
        {
          id: 8,
          img: require("@/assets/images/product_8.jpg"),
          name: "万向轮",
          price: "$13",
          month: 2
          // button:require('')
        }
      ]
    };
  },
  props: {
    products: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  //   created() {
  //     this.axios
  //       .get("http://leeyiqing.site/product.php")
  //       .then(res => {
  //           console.log(res)
  //           this.productList = res.data
  //           })
  //       .catch(err => console.log(err));
  //   },
  methods: {
    product: function(item) {
      console.log("i标签");
      // this.$router.push('product/'+item.id+"/"+item.month+".html")

      // this.$router.push({
      //     path:'product/'+item.id+"/"+item.month+".html",
      //     query:{
      //         title:item.title,
      //         src:item.src
      //     }
      // })

      this.$router.push({
        name: "Product",
        params: {
          title: item.title,
          src: item.src,

          id: item.id,
          month: item.month
        },
        query: {
          price: item.price
        }
      });

      // this.$router.push({
      //     // path:'product',
      //     name:'Product',
      //     query:{
      //         id:item.id,
      //         title:item.title,
      //         src:item.src
      //     },
      //     params:{
      //         price:item.price,
      //         // src:item.src
      //     }

      // })
    },
    recommend: function() {
      console.log("找相似");
    }
  }
};
</script>

<style lang="less" scoped>
.producs {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;

  img {
    width: 100%;
  }
  ul {
    width: 100%;
    list-style: none;
    overflow: hidden;
    zoom: 1;
    li {
      width: 50%;
      text-align: left;
      float: left;
      padding: 2px;
      box-sizing: border-box;

      img {
        width: 100%;
      }
      .title {
        // height: 32px;
        // line-height: 16px;
        box-sizing: border-box;
        font-size: 14px;
        padding: 0 4px;
        margin: 5px 0 3px 0;
        overflow: hidden;
        text-overflow: ellipsis;  
        white-space: nowrap;
        width:calc(100% - 10px);
      }
      .box {
        .prive {
          color: #f23030;
          display: inline-block;
          height: 26px;
          line-height: 26px;
          margin: 0 5px 0 4px;
        }
        .button {
          border-radius: 4px;
          float: right;
          border: 1px solid rgb(228, 228, 228);
          color: rgb(139, 139, 139);
          font-size: 12px;
          padding: 4px;
        }
      }
    }
  }
}
</style>